<template>
  <div class="cesium-viewer-wapper">
    <div id="cesium-viewer" />
    <div class="tool-box-left-top">
      <p><button :class="{active:drawingMode==='rain'}" @click="drawingMode='rain'">雨</button></p>
      <p><button :class="{active:drawingMode==='fog'}" @click="drawingMode='fog'">雾</button></p>
      <p><button :class="{active:drawingMode==='snow'}" @click="drawingMode='snow'">雪</button></p>
    </div>
    <viewerSettingSidebar :viewerSource="viewerSource" style="top:160px" />
    <MousePosition show :viewerSource="viewerSource" />
    <g3vPlayer showTime :clockOptions="clockOptions" :viewerSource="viewerSource" :sliderOption="sliderOption" v-model:playing="playing" />
  </div>
</template>

<script>
import * as Cesium from '@cesiumjs';
import { defineComponent, ref, watch } from 'vue';
import { SelectBox, SliderBar } from '@components/widgets';
import { G3V } from '@g3x';
import { RainEffect, SnowEffect,FogEffect } from '@g3x/g3v/effects';
import { MousePosition, viewerSettingSidebar, g3vPlayer } from '@g3x/g3v/ui';

const g3vOptions = {
  defaultViewRectangle: G3V.defaultViews.global.china.rectangle,
  viewers:[{
    dom: "cesium-viewer",
    name: "viewer1",
    title: "viewer#01",
    viewer:{
      imagery: { type: 'arcgisImagery', options: { brightness: 1, show: true } },
      imageryProvider: null,
      terrain: { type: 'default', options: { requestVertexNormals: true, requestWaterMask: true } },
      terrainProvider: null,
      shadows: false,
    },
    layers:[
      { type: 'tdtIboMap', options: { brightness: 1, show: true } },
      { type: 'tdtImgAnno', options: { brightness: 1, show: true } },
      // { type: 'darkMask', options: { brightness: 1, alpha: 0.85 } },
      { type: 'graticule', options: { brightness: 1, show: false } }
    ],
    globe: {
      depthTestAgainstTerrain: false,
      enableLighting: true //启用以太阳为光源的地球
    },
    navigation: {
      // defaultResetView: G3V.defaultViews.global.china.rectangle ,
      defaultResetView: null //flyHome
    },
    hideLayers: false,
  }],
};

export default defineComponent({
  name: 'groundImages', // 热力图
  components: { SelectBox, SliderBar, viewerSettingSidebar, g3vPlayer, MousePosition },
  setup() {
    return {};
  },
  props: {},
  data() {
    return {
      playing: true,
      g3v: null,
      drawingMode: '',
      // timeStart: '2021-05-03T00:00:00+08:00',
      // timeEnd: '2021-05-09T00:00:00+08:00',
      sliderOption: { min: 0, max: 3600 * 24, step: 1 }
    };
  },
  computed: {
    viewer() {
      return this.g3v && this.g3v.viewer$1;
    },
    g3vViewer() {
      return this.g3v && this.g3v.g3vViewer$1;
    },
    viewerSource() {
      const { viewer } = this;
      return { viewer };
    },
    clockOptions() {
      return { multiplier: 1 };
    }
  },
  watch: {
    drawingMode(val) {
      const { viewer } = this;
      if (!viewer) return;
      this.effect && this.effect.destroy();
      if (val === 'snow') {
        this.effect = new SnowEffect(viewer, {
          size: 0.02, //雪大小 ，默认可不写
          speed: 60.0 //雪速，默认可不写
        });
      } else if (val === 'rain') {
        this.effect = new RainEffect(viewer, {
          snowSize: 0.02, //雪大小 ，默认可不写
          snowSpeed: 60.0 //雪速，默认可不写
        });
      } else if (val === 'fog') {
        this.effect = new FogEffect(viewer, {
          snowSize: 0.02, //雪大小 ，默认可不写
          snowSpeed: 60.0 //雪速，默认可不写
        });
      }
    }
  },
  mounted() {
    this.initViewer();
  },
  beforeUnmount() {},
  unmounted() {
    this.effect && this.effect.destroy();
    this.effect = null;
    this.g3v && this.g3v.destroy();
    this.g3v = null;
  },
  methods: {
    initViewer() {
      let vm = this;
      vm.g3v = new G3V(g3vOptions,()=>{
        vm.onViewerInited();
        vm.initEffects();
      });
    },
    onViewerInited() {
      let vm = this;
      const lyrDefine = {
        type: 'tileset',
        url: '//zzgis.com/cdn/3d/SampleData/earthSDK/dayanta/tileset.json',
        options: { name: 'dayanta', title: 'dayanta', brightness: 1, show: true }
      };
      vm.g3vViewer.addTileset(lyrDefine, tileset => {
        // vm.viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0.0, -0.5, tileset.boundingSphere.radius * 2.0));
        vm.setHeight = function(height) {
          height = Number(height);
          if (isNaN(height)) {
            return;
          }
          var cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center);
          var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
          var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, height);
          var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
          tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
        };
        vm.setHeight(0);
      });
    },
    initEffects() {
      let vm = this;
      vm.viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(108.96024, 34.21807, 498),
        orientation: {
          heading: 5.99590,
          pitch:-0.50014,
          roll: 0.0
        },
        duration: 3,
        complete:()=>vm.drawingMode = 'rain',
      });
    }
  }
});
</script>

<style lang="less">
.tool-box-left-top {
  display: flex;

  button {
    min-width: 5em;
    background-color: rgba(0, 0, 0, 0.75);
    border-color: rgba(0, 0, 0, 0);
    cursor: pointer;

    transition: all 500ms;

    &:hover {
      opacity: 0.75;
    }

    &.active{
      background-color: rgba(0, 20, 200, 0.75);
    }
  }
}

</style>
